<!-- 只分配公司角色和所属项目 -->
<script setup>
import { ref, reactive, onMounted, watch, nextTick, h } from 'vue';
import { iuserApi as MainApi, iuserById as MainById, roleApi } from '@T2/service/api.ts';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCurrentWatchStore, useIuserInfoStore } from '@T2/store/users.ts';
import { isPhone, buildTree } from '@T2/utils/utils.ts';
import { Md5 } from 'ts-md5';

const currentWatchStore = useCurrentWatchStore();
const { projectList } = currentWatchStore;
const iuserInfoStore = useIuserInfoStore();
const { info, getHandleRight } = iuserInfoStore;
const RIGHT = getHandleRight(['299', '300', '301', '302', '303', '319']);

const props = defineProps({
  node: {
    type: Object,
    required: true,
  },
  departmentIDList: {
    type: Array,
    required: true,
  },
  departmentTree: {
    type: Array,
    required: true,
  },
});

onMounted(() => {
  GetMainTable();
  getRoleTree();
});
watch(() => props.node.data.id, (nv, ov) => {
  if (nv || nv === 0) {
    GetMainTable();
  }
});
const MainTable = reactive({
  data: [],
  total: 0,
});
const Filter = reactive({
  page: 1,
  pagesize: 30,
  ordering: 'create_time',
  search: '',
});
watch(() => ({...Filter}), (nv, ov) => {
  if (nv.page === 1 || nv.page !== ov.page) {
    GetMainTable();
  } else {
    Filter.page = 1;
  }
});
const GetMainTable = () => {
  MainTable.data = [];
  MainApi({
    method: 'get',
    params: {
      ...Filter,
      departments: props.node.data.id || null,
    }
  }).then(res => {
    MainTable.data = res?.results || [];
    MainTable.total = res?.count || 0;
  });
}
const Resd = reactive({
  roleTree: [],
});
const getRoleTree = () => {
  Resd.roleTree = [];
  roleApi({
    method: 'get',
    params: {
      ordering: 'id',
      project__isnull: true,
    }
  }).then(res => {
    let arrs = buildTree(res.results || [], 'parent');
    Resd.roleTree = arrs;
  });
}

/* 新增编辑 */
const MainPopup = reactive({
  visible: false,
  type: '新增',
});
const MainForm = reactive({
  model: {},
  contract_old: '',
  departments_current: [],
  departments_others: [],
});
const MainFormRef = ref(null);
const ManiFormTreeRef = ref(null);
const handleMainAdd = (isAble = false) => {
  if (!isAble) {
    return;
  }
  MainPopup.visible = true;
  MainPopup.type = '新增';
  MainForm.model = {};
  MainForm.departments_current = [];
  nextTick(() => {
    MainFormRef.value.clearValidate();
  });
}
const handleMainEdit = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  MainPopup.visible = true;
  MainPopup.type = '编辑';
  MainForm.model = {
    id: row.id,
    truename: row.truename,
    contract: row.contract,
  };
  const departmentsIdsSet = new Set(props.departmentIDList);
  const departments_current = [];
  const departments_others = [];
  for (const dept of row.departments) {
    if (departmentsIdsSet.has(dept)) {
      departments_current.push(dept);
    } else {
      departments_others.push(dept);
    }
  }
  MainForm.departments_current = departments_current;
  MainForm.departments_others = departments_others;
  
  MainForm.contract_old = row.contract;
  nextTick(() => {
    MainFormRef.value.clearValidate();
  });
}
const handleMainSubmit = () => {
  MainFormRef.value.validate((valid) => {
    if (valid) {
      if (!isPhone(MainForm.model.contract)) {
        ElMessage.error('请输入正确的手机号');
        return;
      }
      MainPopup.visible = false;
      if (MainPopup.type === '新增') {
        AddMain();
      } else if (MainPopup.type === '编辑') {
        EditMain();
      }
    }
  });
}
const AddMain = () => {
  let auth_user_w = {
    password: Md5.hashStr('.ieieye.com' + MainForm.model.contract.substr(-6, 6) + 'shhengji'),
    username: MainForm.model.contract,
  };
  MainApi({
    method: 'post',
    data: {
      ...MainForm.model,
      auth_user_w,
      company: info.company,
      type: '项目用户',
    }
  }).then(res => {
    ElMessage.success('新增成功');
    GetMainTable();
  });
}
const EditMain = () => {
  let auth_user_w = {
    username: MainForm.model.contract,
  };
  if (MainForm.contract_old !== MainForm.model.contract) {
    auth_user_w.password = Md5.hashStr('.ieieye.com' + MainForm.model.contract.substr(-6, 6) + 'shhengji');
    ElMessage.warning('已修改登陆账号及密码！');
  }
  MainById({
    method: 'patch',
    id: MainForm.model.id,
    data: {
      ...MainForm.model,
      auth_user_w,
      departments: MainForm.departments_current.concat(MainForm.departments_others),
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    GetMainTable();
  });
}
const changeOfStatus = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
	return ElMessageBox.confirm(`是否确认${ row.status ? '关闭，关闭' : '开启，开启'} 【${ row.truename }】 后，${ row.status ? '禁止' : '允许'} 此用户登录系统`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		MainById({
			method: 'patch',
			id: row.id,
			data: {
				status: !row.status,
			}
		}).then(res => {
			ElMessage.success('操作成功');
			GetMainTable();
		});
	}).catch(() => {
		ElMessage.info('取消切换！');
	})
}
const handleMainDelete = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  ElMessageBox.confirm('', {
    message: h('div', null,[
      h('p',{ style:'font-size:16px;color: #4C4C4C;font-weight:500;'}, `您是否要删除 ${ row.truename }？`),
    ]),
    type: 'warning',
    confirmButtonText: '确认',
  }).then(() => {
    MainById({
      method: 'delete',
      id: row.id,
    }).then(res => {
      ElMessage.success('删除成功');
      GetMainTable();
    });
  }).catch(() => {
    ElMessage.info('已取消');
  });
}

/* 重置密码 */
const handleMainResetPassword = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  ElMessageBox.confirm('', {
    message: h('div', null,[
      h('p',{ style:'font-size:16px;color: #4C4C4C;font-weight:500;'}, `您是否要重置 ${ row.truename } 的密码？`),
    ]),
    type: 'warning',
    confirmButtonText: '确认',
  }).then(() => {
    let auth_user_w = {
      username: row.contract,
    };
    auth_user_w.password = Md5.hashStr('.ieieye.com' + row.contract.substr(-6, 6) + 'shhengji');
    MainById({
    	method: 'patch',
    	id: row.id,
    	data: {
        auth_user_w,
    	}
    }).then(res => {
    	ElMessage.success('操作成功');
    });
  }).catch(() => {
    ElMessage.info('已取消');
  });
}

/* 分配角色 */
const rightPopup = reactive({
  visible: false,
});
const rightForm = reactive({
  model: {},
  truename: '',
});
const rightFormRef = ref(null);
const handleRoles = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  rightPopup.visible = true;
  rightForm.model = {
    id: row.id,
    company_roles: row.company_roles,
  };
  rightForm.truename = row.truename;
}
const handleRoleCheck = (data, checkedArrs) => {
  /* 剔除当前节点的子孙辈id */
  const loIds = findLowIds(data);
  rightForm.model.company_roles = rightForm.model.company_roles.filter(item => !loIds.includes(item));
  /* 如果祖父辈已经勾选则当前选中无效 */
  const highIds = findHighIds(Resd.roleTree, data.id);
  if (rightForm.model.company_roles.some(item => highIds.includes(item))) {
    ElMessage.warning('已经选择了上级角色，您不必选择该角色');
    rightForm.model.company_roles = rightForm.model.company_roles.filter(item => item !== data.id);
  }
}
/* 递归获取当前节点的所有上级node的id */
const findHighIds = (tree, targetId) => {
  const path = [];
  const traverse = (nodes, ancestors) => {
    for (let node of nodes) {
      if (node.id === targetId) {
        path.push(...ancestors);
        return true;
      }
      if (node.children && node.children.length > 0) {
        if (traverse(node.children, [...ancestors, node.id])) {
          return true;
        }
      }
    }
    return false;
  }
  traverse(tree, []);
  return path;
}
/* 递归获取当前选择节点的children的所有角色id */
const findLowIds = (tree) => {
  let ids = [];
  const traverse = (node) => {
    ids.push(node.id);
    node.children?.forEach(child => traverse(child));
  }
  tree.children?.forEach(child => traverse(child));
  return ids;
}
const handleRolesSubmit = () => {
  MainById({
    method: 'patch',
    id: rightForm.model.id,
    data: {
      ...rightForm.model,
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    GetMainTable();
  });
  rightPopup.visible = false;
}

/* 分配项目 */
const projectsPopup = reactive({
  visible: false,
});
const projectsForm = reactive({
  model: {},
  truename: '',
});
const projectsFormRef = ref(null);
const handleProjects = (isAble = false, row) => {
  if (!isAble) {
    return;
  }
  projectsPopup.visible = true;
  projectsForm.model = {
    id: row.id,
    projects: row.projects,
  };
  projectsForm.truename = row.truename;
}
const handleProjectsSubmit = () => {
  projectsPopup.visible = false;
  MainById({
    method: 'patch',
    id: projectsForm.model.id,
    data: {
      ...projectsForm.model,
      type: projectsForm.model.projects.length > 1 ? '公司用户' : '项目用户',
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    GetMainTable();
  });
}
</script>

<template>
  <div class="flex-column mainCard">
    <el-form label-width="120px" class="flex t_form">
      <el-form-item label="姓名查询：">
        <el-input v-model="Filter.search" clearable></el-input>
      </el-form-item>
      <div class="flex r_btn">
        <el-button type="primary" @click="handleMainAdd(RIGHT['299'])" :disabled="!RIGHT['299']">
          新增
        </el-button>
      </div>
    </el-form>
    <el-table :data="MainTable.data" scrollbar-always-on>
      <el-table-column label="序号" type="index" align="center" width="100px" fixed="left"></el-table-column>
      <el-table-column label="姓名" prop="truename" min-width="120px" show-overflow-tooltip fixed="left"></el-table-column>
      <el-table-column label="登陆账号" prop="contract" min-width="130px" fixed="left"></el-table-column>
      <el-table-column label="所属项目" prop="project_names" min-width="180px" show-overflow-tooltip></el-table-column>
      <el-table-column label="角色" prop="company_role_names" min-width="180px" show-overflow-tooltip></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <template v-if="scope.row.type !== '注册用户'">
            <el-switch
              v-model="scope.row.status"
              class="ml-2"
              :before-change="() => { return changeOfStatus(RIGHT['300'], scope.row) }"
              :disabled="!RIGHT['300']"
            />
          </template>
        	<template v-else>
            <el-switch
              v-model="scope.row.status"
              class="ml-2"
              disabled
            />
          </template>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="create_time" min-width="160px"></el-table-column>
      <el-table-column label="上次登录时间" prop="last_login" min-width="160px">
        <template #default="scope">{{ scope.row.auth_user?.last_login }}</template>
      </el-table-column>
      <el-table-column label="登出时间" prop="logout_time" min-width="160px"></el-table-column>
      <el-table-column label="操作" fixed="right" width="260px">
        <template #default="scope">
          <template v-if="scope.row.type !== '注册用户'">
            <el-button link type="primary" @click="handleMainEdit(RIGHT['300'], scope.row)" :disabled="!RIGHT['300']">
              编辑
            </el-button>
            <el-button link type="primary" @click="handleProjects(RIGHT['319'], scope.row)" :disabled="!RIGHT['319']">
              分配项目
            </el-button>
            <el-button link type="primary" @click="handleRoles(RIGHT['302'], scope.row)" :disabled="!RIGHT['302']">
              分配角色
            </el-button>
            <el-popover
              placement="bottom"
              popper-style="min-width: auto; padding: 5px 0;"
              :width="100"
              trigger="click"
            >
              <template #reference>
                <el-button type="primary" link>···</el-button>
              </template>
              <div class="flex-column">
                <el-button style="margin: 5px" link type="primary" @click="handleMainResetPassword(RIGHT['303'], scope.row)" :disabled="!RIGHT['303']">
                  重置密码
                </el-button>
                <el-button style="margin: 5px" link type="danger" @click="handleMainDelete(RIGHT['301'], scope.row)" :disabled="!RIGHT['301']">
                  删除
                </el-button>
              </div>
            </el-popover>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="->, total, prev, pager, next, sizes"
      background 
      :page-sizes="[10, 20, 30, 50, 100]"
      :pager-count="5"
      v-model:currentPage="Filter.page"
      v-model:page-size="Filter.pagesize"
      :total="MainTable.total"
    />
  </div>
  
  <!-- 新增编辑 -->
  <el-dialog width="500px" :title="MainPopup.type + '用户'" v-model="MainPopup.visible">
    <el-form
      ref="MainFormRef"
      :model="MainForm.model"
      label-width="120px"
    >
      <el-form-item prop="truename" label="用户名：" :rules="[{required: true, message: '不能为空', trigger: 'blur'},]">
        <el-input v-model="MainForm.model.truename"></el-input>
      </el-form-item>
      <el-form-item prop="contract" label="登陆账号：" :rules="[{required: true, message: '不能为空', trigger: 'blur'},]">
        <el-input placeholder="请输入手机号" v-model="MainForm.model.contract"></el-input>
        <el-tooltip content="初始密码为手机号后6位，账号发生修改会自动重置密码" placement="right">
          <div class="description flex-center-center pointer">?</div>
        </el-tooltip>
      </el-form-item>
      <el-form-item prop="departments" label="所属组织：">
        <div class="filter-tree">
          <el-tree-select
            placeholder="选择所属组织"
            node-key="id"
            :fit-input-width="true"
            :teleported="false"
            clearable
            collapse-tags
            collapse-tags-tooltip
            :render-after-expand="false"
            multiple
            default-expand-all
            :check-strictly="true"
            show-checkbox
            :highlight-current="true"
            :props="{label: 'name'}"
            v-model="MainForm.departments_current"
            :data="props.departmentTree"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="MainPopup.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleMainSubmit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  
  <!-- 分配角色 -->
  <el-dialog width="500px" title="分配角色" v-model="rightPopup.visible">
    <el-form
      ref="rightFormRef"
      :model="rightForm.model"
      label-width="120px"
    >
      <el-form-item prop="truename" label="用户名：">
        {{ rightForm.truename }}
      </el-form-item>
      
      <el-form-item prop="company_roles" label="公司角色：">
        <div class="filter-tree">
          <el-tree-select
            ref="roleTreeRef"
            placeholder="选择公司角色"
            node-key="id"
            :fit-input-width="true"
            :teleported="false"
            clearable
            collapse-tags
            collapse-tags-tooltip
            :render-after-expand="false"
            multiple
            default-expand-all
            :check-strictly="true"
            show-checkbox
            :highlight-current="true"
            :props="{label: 'name'}"
            v-model="rightForm.model.company_roles"
            :data="Resd.roleTree"
            @check="handleRoleCheck"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="rightPopup.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleRolesSubmit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  
  <!-- 分配项目 -->
  <el-dialog width="500px" title="分配项目" v-model="projectsPopup.visible">
    <el-form
      ref="projectsFormRef"
      :model="projectsForm.model"
      label-width="120px"
    >
      <el-form-item prop="truename" label="用户名：">
        {{ projectsForm.truename }}
      </el-form-item>
      
      <el-form-item prop="projects" label="分配项目：">
        <el-select v-model="projectsForm.model.projects" multiple collapse-tags collapse-tags-tooltip clearable>
          <el-option v-for="item in projectList" :value="item.id" :key="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="projectsPopup.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleProjectsSubmit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
@use '@T2/styles/normal.scss';
.description {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #888888;
  border-radius: 50%;
  color: #ffffff;
  margin-left: 5px;
}
.filter-tree {
  width: 90%;
}
.form-title {
  font-weight: 600;
  font-size: 14px;
  position: relative;
  margin-bottom: 10px;
  padding-left: 10px;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 70%;
    background-color: #0055ff;
    width: 3px;
    transform: translateY(-50%);
  }
}
</style>

<style scoped>
:deep(.el-select-dropdown__item) {
  margin-left: 3px;
}
:deep(.filter-tree .el-select-dropdown .el-icon) {
  font-size: 18px;
  margin-right: 5px;
}
:deep(.filter-tree .el-select-dropdown .el-tree-node__content) {
  height: 30px;
  cursor: default;
}
:deep(.filter-tree .el-select-dropdown .el-select-dropdown__item) {
  font-size: 15px;
}
:deep(.filter-tree .el-select-dropdown .el-select-dropdown__wrap) {
  max-height: 450px;
}
</style>